<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="format-detection" content="telephone=no">
    <title>微博网页版</title>
    <link rel="stylesheet" href="./css/shouye（guanzhu）.css">
    <link rel="stylesheet" href="./css/swiper-bundle.min.css">
    <script src="./fonts/iconfont.js"></script>
</head>

<body>
    <!-- 搜索框 -->
    <header>
        <ul class="top">
            <li>
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-qiandao"></use>
                </svg>
            </li>
            <li>
                <p>关注</p>
            </li>
            <li>
                <p>推荐</p>

            </li>
            <li>
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-hongbao"></use>
                </svg>
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-tianjia"></use>
                </svg>
            </li>
        </ul>
    </header>
    <!-- swiper s1 -->
    <!-- swiper的上图下文 -->
<div class="huadong">
    <div class="swiper s1">
        <div class="swiper-wrapper">
            <!-- <div class="swiper-slide">
                <img src="./images/shouye/1.jpg">
                <p>北京卫视</p>
            </div>
            <div class="swiper-slide"><img src="./images/shouye/2.jpg">
                    <p>董路</p>
            </div>
            <div class="swiper-slide"><img src="./images/shouye/3.jpg">
                <li>
                    <p>有道考神</p>
                </li>
            </div>
            <div class="swiper-slide"><img src="./images/shouye/4.jpg">
                <li>
                    <p>李梦娇</p>
                </li>
            </div>
            <div class="swiper-slide"><img src="./images/shouye/5.jpg">
                <li>
                    <p>恒愚法师</p>
                </li>
            </div>
            <div class="swiper-slide"><img src="./images/shouye/6.jpg">
                <li>
                    <p>羽联抽签</p>
                </li>
            </div>
            <div class="swiper-slide"><img src="./images/shouye/7.jpg">
                <li>
                    <p>刑法学孙</p>
                </li>
            </div>
            <div class="swiper-slide"><img src="./images/shouye/8.jpg">
                <li>
                    <p>杨波老师</p>
                </li>
            </div>
            <div class="swiper-slide"><img src="./images/shouye/9.jpg">
                <li>
                    <p>Alex</p>
                </li>
            </div>
            <div class="swiper-slide"><img src="./images/shouye/10.jpg">
                <li>
                    <p>i商周</p>
                </li>
            </div>
            <div class="swiper-slide"><img src="./images/shouye/11.jpg">
                <li>
                    <p>厚恩投资</p>
                </li>
            </div>
            <div class="swiper-slide"><img src="./images/shouye/12.jpg">
                <li>
                    <p>冰寒玩家</p>
                </li>
            </div>
            <div class="swiper-slide"><img src="./images/shouye/13.jpg">
                <li>
                    <p>平安北京</p>
                </li>
            </div> -->
        </div>
    </div>
</div>

<!-- 精选推荐可能喜欢的人 -->
<div class="xihuanderen">
    <div class="wenzi">
        <p>精选推荐可能感兴趣的人</p>
    </div>
    <div class="swiper s2">
        <div class="swiper-wrapper">
            <div class="swiper-slide">
                <div class="boder"> 
                    <img src="./images/chaohua(kantie)/头像.jpg" alt="">
                    <h3>巴若楠</h3>
                    <p>加油哦</p>
                    <div class="guanzhu">
                        <p>+ 关注</p>
                    </div>
                </div>
            </div>
            <div class="swiper-slide">
                <div class="boder">
                    <img src="./images/chaohua(kantie)/头像.jpg" alt="">
                    <h3>巴若楠</h3>
                    <p>加油哦</p>
                    <div class="guanzhu">
                        <p>+ 关注</p>
                    </div>
                </div>
            </div>
            <div class="swiper-slide">
                <div class="boder">
                    <img src="./images/chaohua(kantie)/头像.jpg" alt="">
                    <h3>巴若楠</h3>
                    <p>加油哦</p>
                    <div class="guanzhu">
                        <p>+ 关注</p>
                    </div>
                </div>
            </div>
            <div class="swiper-slide">
                <div class="boder">
                    <img src="./images/chaohua(kantie)/头像.jpg" alt="">
                    <h3>巴若楠</h3>
                    <p>加油哦</p>
                    <div class="guanzhu">
                        <p>+ 关注</p>
                    </div>
                </div>
            </div>
            <div class="swiper-slide">
                <div class="boder">
                    <img src="./images/chaohua(kantie)/头像.jpg" alt="">
                    <h3>巴若楠</h3>
                    <p>加油哦</p>
                    <div class="guanzhu">
                        <p>+ 关注</p>
                    </div>
                </div>
            </div>
            <div class="swiper-slide">
                <div class="boder">
                    <img src="./images/chaohua(kantie)/头像.jpg" alt="">
                    <h3>巴若楠</h3>
                    <p>加油哦</pn>
                    <div class="guanzhu">
                        <p>+ 关注</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- 关注的人的微博已经全部看完 -->
<div class="shouye1">
    <h1>关注的人发的微博都看完了</h1>
    <p>以下是为你精心挑选的内容，喜欢就关注哦</p>
</div>
<!-- 微博内容（左图右文） -->
<div class="neirong">
    <div class="tuxiang">
         <a href="#">
            <img src="./images/shouye/21.jpg">
        </a>
    <div class="txt">
        <h3>bbbbb</h3>
        <span class="fujia1">12-10</span>
        <span class="fujia2">来自微博网页版</span>
        <div class="guanzhu2">
              <span>+加关注</span>
        </div>
    </div> 
    </div>
    <div class="tuxiang2">
        <p>爱死我的tony老师啦</p>
        <img src="./images/shouye/22.jpg">
    </div>
    <div class="kuaijiejian">
        <div class="tuxiang3">
            <img src="./images/shouye/头像.jpg" alt="">
        </div>
        <div class="pinglunsearch">
            <input type="text" name="search" id="search" placeholder="友善评论，文明发言">
        </div>
    </div>
    <div class="santubiao">
        <div class="sanyang">
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-zhuanfa"></use>
                </svg>
            <p>6</p>
        </div>
        <div class="sanyang">
            <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-liuyan"></use>
            </svg>
             <p>2</p>
        </div>
        <div class="sanyang">
            <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-good"></use>
            </svg>
            <p>105</p>
        </div>
    </div>
</div>
<div class="neirong">
    <div class="tuxiang">
         <a href="#">
            <img src="./images/shouye/23.jpg">
        </a>
    <div class="txt">
        <h3>skullpanda狂热粉</h3>
        <span class="fujia2">1219人关注了他</span>
        <div class="guanzhu2">
              <span>+加关注</span>
        </div>
    </div> 
    </div>
    <div class="tuxiang2">
        <p>这是我最喜欢的skullpanda啦！</p>
        <img src="./images/shouye/24.jpg">
    </div>
    <div class="kuaijiejian">
        <div class="tuxiang3">
            <img src="./images/shouye/头像.jpg" alt="">
        </div>
        <div class="pinglunsearch">
            <input type="text" name="search" id="search" placeholder="友善评论，文明发言">
        </div>
    </div>
    <div class="santubiao">
        <div class="sanyang">
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-zhuanfa"></use>
                </svg>
            <p>6</p>
        </div>
        <div class="sanyang">
            <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-liuyan"></use>
            </svg>
             <p>2</p>
        </div>
        <div class="sanyang">
            <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-good"></use>
            </svg>
            <p>105</p>
        </div>
    </div>
</div>
    <nav id="snav"></nav>
    <main></main>
    <aside></aside>
    <section id="ad"></section>
    <nav id="bnav"></nav>
    <!-- 下导航 -->
    <footer>
        <nav class="bnav">
         <div class="btnav">
             <div class="bonav">
                 <a href="./shouye（guanzhu）.html">
                     <svg class="icon" aria-hidden="true">
                         <use xlink:href="#icon-shouye1"></use>
                     </svg>
                 </a>
                 <p>
                     <a href="#">首页</a>
                 </p>
             </div>
             <div class="bonav">
                 <a href="./chaohua（kantie）.html">
                     <svg class="icon" aria-hidden="true">
                         <use xlink:href="#icon-chaohua"></use>
                     </svg>
                 </a>
                 <p>
                     <a href="#">超话</a>
                 </p>
             </div>
             <div class="bonav">
                 <a href="./faxian.html">
                     <svg class="icon" aria-hidden="true">
                         <use xlink:href="#icon-Magnifier"></use>
                     </svg>
                 </a>
                 <p>
                     <a href="#">发现</a>
                 </p>
             </div>
             <div class="bonav">
                 <a href="./xiaoxi.html">
                     <svg class="icon" aria-hidden="true">
                         <use xlink:href="#icon-xinfeng"></use>
                     </svg>
                 </a>
                 <p>
                     <a href="#">消息</a>
                 </p>
             </div>
             <div class="bonav">
                 <a href="./wo.html">
                     <svg class="icon" aria-hidden="true">
                         <use xlink:href="#icon-wo"></use>
                     </svg>
                 </a>
                 <p>
                     <a href="#">我的</a>
                 </p>
             </div>
         </div> 
     </nav>
     </footer>
     <script src="./js/swiper-bundle.min.js"></script>
     <script>
        var swiper1 = new Swiper(".s1", {
          slidesPerView: 5,
          spaceBetween: 5,
        });
        var swiper2 = new Swiper(".s2", {
          slidesPerView: 5,
          spaceBetween: 5,
        });


        const url = "http://rap2api.taobao.org/app/mock/321822/brn2";
        const div = document.querySelector(".swiper-wrapper");
        fetch(url)
        .then((res) => res.json())
        .then(data => {
            let str = '';
            data.forEach((item) => {
                str += `
                    <div class="swiper-slide">
                        <img src="${item.imageSrc}">
                        <p>${item.name}</p>
                    </div>
                `
            })
            div.innerHTML = str;
        });
           




//         [
//     {
//         "imageSrc": "./images/shouye/1.jpg",
//         "name": "北京卫视"
//     },
//     {
//         "imageSrc": "./images/shouye/2.jpg",
//         "name": "董路"
//     },
//     {
//         "imageSrc": "./images/shouye/3.jpg",
//         "name": "有道考神"
//     },
//     {
//         "imageSrc": "./images/shouye/4.jpg",
//         "name": "李梦娇"
//     },
//     {
//         "imageSrc": "./images/shouye/5.jpg",
//         "name": "恒愚法师"
//     },
//     {
//         "imageSrc": "./images/shouye/6.jpg",
//         "name": "羽联抽签"
//     },
//     {
//         "imageSrc": "./images/shouye/7.jpg",
//         "name": "刑法学孙"
//     },
//     {
//         "imageSrc": "./images/shouye/8.jpg",
//         "name": "杨波老师"
//     },
//     {
//         "imageSrc": "./images/shouye/9.jpg",
//         "name": "Alex"
//     },
//     {
//         "imageSrc": "./images/shouye/10.jpg",
//         "name": "i商周"
//     },
//     {
//         "imageSrc": "./images/shouye/11.jpg",
//         "name": "厚恩投资"
//     },
//     {
//         "imageSrc": "./images/shouye/12.jpg",
//         "name": "冰寒玩家"
//     },
//     {
//         "imageSrc": "./images/shouye/13.jpg",
//         "name": "平安北京"
//     }
// ]
    </script>
</body>
</html>